import { StyleSheet, Text, View } from 'react-native';

import IconDownload from '@svgs/icon_download.svg';
import LoadingIcon from '@svgs/icon_loading.svg';
import SuccessIcon from '@svgs/icon_success.svg';
import WarnIcon from '@svgs/icon_warn.svg';
import { ToastConfig } from 'react-native-toast-message/lib/src/types';

import { pxToVh, pxToVw } from './pxToVx.ts';

/*
  1. Create the config
*/
const toastConfig: ToastConfig = {
  tips: ({ text1, props }) => (
    <View style={styles.tips_toast}>
      {props._type === 'success' && <SuccessIcon />}
      {props._type === 'warning' && <WarnIcon />}
      {props._type === 'loading' && <LoadingIcon />}
      <Text style={styles.tips_toast_text}>{text1}</Text>
    </View>
  ),
  lightWeightToast: ({ props }) => (
    <View style={styles.lightWeightToast_container}>
      {props._subType === 'loading' && <IconDownload style={styles.lightWeightToast_icon} />}
      {props._subType === 'success' && <SuccessIcon style={styles.lightWeightToast_icon} />}
      {(props._subType === 'warning' || !props?._subType) && <WarnIcon style={styles.lightWeightToast_icon} />}
      <Text style={styles.lightWeightToast_text}>{props._message}</Text>
    </View>
  ),
};

const styles = StyleSheet.create({
  tips_toast: {
    top: pxToVh(20),
    backgroundColor: 'rgba(0, 0, 0, 0.90)',
    paddingHorizontal: pxToVw(24),
    paddingVertical: pxToVh(12),
    borderRadius: pxToVw(12),
    flexDirection: 'row',
    columnGap: pxToVw(8),
    alignItems: 'center',
    zIndex: 9999,
  },
  tips_toast_text: {
    fontSize: pxToVh(13),
    lineHeight: pxToVh(18),
    fontWeight: '600',
    color: '#fff',
  },
  lightWeightToast_container: {
    position: 'absolute',
    top: pxToVh(20),
    backgroundColor: 'rgba(0, 0, 0, 0.90)',
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: pxToVw(24),
    paddingVertical: pxToVh(12),
    borderRadius: pxToVw(12),
  },
  lightWeightToast_icon: {
    width: pxToVw(16),
    height: pxToVw(16),
    marginRight: pxToVw(8),
  },
  lightWeightToast_text: {
    color: 'white',
    fontSize: pxToVw(13),
    fontWeight: '600',
  },
});

export default toastConfig;
